<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画板</title>
    <style>
        body,html{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0 no-repeat; background-size: cover; overflow: hidden; font-family: "Microsoft yahei"; background-color: #fff; }
		li{ list-style-type: none; }
		ul{ padding-left: 10px }
        h1{
            position:fixed;
            left:15px;
            top:5px;
            width:250px;
            height:60px;
            color: #ff5e83;
            font-size:26px;
            line-height:60px;
            text-align:center;
            background-color:;
        }
        canvas{ position: fixed; left: 280px; top: 5px; display: block; cursor: pointer; background-color: #FFFFFF; border: 1px solid #CCCCCC; }
        .container{
            width:250px;
            height:60px;
            position:fixed;
            left:15px;
            top:70px;
        }
        .container h2{
            width:100%;
            height:60px;
            font-size:22px;
            text-align:center;
            color: #ff377e;
            font-weight:normal;
            line-height:60px;
            border-bottom:1px solid #000;
        }
        .container h3{
            width:100%;
            height:30px;
            font-size:18px;
            text-align:center;
            color: #41b1ff;
            font-weight:normal;
            line-height:30px;
        }
        .row{ width: 100%; height: auto; background-color: rgba(192,192,192,0.50); overflow: hidden;        }
        .type{
            width:100%;
            height:auto;
            margin:20px 0;
            padding-bottom:10px;
            border-bottom:1px solid #fff;
        }
        .type:after{
            content:"";
            display:block;
            clear:both;
        }
        .type li{
            float:left;
            width:90px;
            height:45px;
            margin:0 auto;
            background-color:#0078ff;
            color:#fff;
            font-size:18px;
            line-height:45px;
            text-align:center;
            margin-bottom:15px;
            border-radius:5px;
            cursor:pointer;
            transition:all 0.7s;
        }
        .type li:hover{
            background-color:#fff;
            color:#0078ff;
            box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
        }
        .type .typeactive{
            background-color:#fff;
            color:#0078ff;
            box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
        }
        .type li:nth-child(odd){
            margin-left:25px;
        }
        .type li:nth-child(even){
            margin-left:20px;
        }
        .style{
            width:100%;
            height:40px;
        }
        .style li{
            float:left;
            width:90px;
            height:45px;
            background-color:#FFBC00;
            color:#fff;
            font-size:18px;
            line-height:45px;
            text-align:center;
            border-radius:5px;
            cursor:pointer;
            transition:all 0.7s;
        }
        .style li:hover{
            color: #ffa800;
            background-color:#fff;
            box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
        }
        .style .styleactive{
            color: #ffa800;
            background-color:#fff;
            box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
        }
        .style li:nth-child(1){
            margin-left:25px;
        }
        .style li:nth-child(2){
            margin-left:20px;
        }
        .poly{
            position:relative;
        }
        .bian{
            position:absolute;
            left:100px;top:0;
            width:90px;
            height:auto;
            border-radius:5px;
            background-color:#EC494E;
            overflow:hidden;
            overflow:hidden;
            transform:scale(1.2);
            display:none;
        }
        .bian span{
            display:block;
            float:left;
            width:40px;
            height:45px;
            font-size:16px;
            color:#fff;
            text-align:center;
            line-height:40px;
            color:#fff;
            transition:all 0.7s;
        }
        .bian input{
            float:left;
            width:45px;
            height:35px;
            margin-top:5px;
            border:1px solid #fff;
            box-sizing:border-box;
            text-align:center;
            line-height:40px;
            font-size:18px;
            color:#fff;
            background:#EC494E;
            border-radius:3px;
            box-shadow:0 0 0 4px #fff inset;
            transition:all 0.7s;
        }
        .cut,.create,.back{
            float:left;
            width:90px;
            height:45px;
            margin-left:25px;
            margin-bottom:15px;
            background-color: #5bd219;
            color:#fff;
            font-size:18px;
            line-height:45px;
            text-align:center;
            border-radius:5px;
            cursor:pointer;
        }
        .copy,.clear,.save{
            float:left;
            width:90px;
            height:45px;
            margin-left:20px;
            margin-bottom:15px;
            background-color: #5bd219;
            color:#fff;
            font-size:18px;
            line-height:45px;
            text-align:center;
            border-radius:5px;
            cursor:pointer;
        }
        .shezhi{
            transition:all 0.7s;
        }
        .shezhistyle{
            background:#fff;
            color:#5bd219;
        }
        .create{
            position:relative;
        }
        .xinjian{
            position:absolute;
            left:0;top:0;
            width:200px;
            height:165px;
            border-radius:5px;
            background-color:#EC494E;
            box-shadow:0 0 15px rgba(236, 73, 78, 0.76);
            cursor:default;
            display:none;
        }
        .xinjian:hover{
            color:#fff;
        }
        .xinjian_before{
            position:absolute;
            right:0;
            top:0;
            width:20px;
            height:20px;
            color:#fff;
            line-height:16px;
            text-indent:-1px;
            font-size:30px;
            border:1px solid #fff;
            transform:rotate(45deg);
            border-radius:50%;
            cursor:pointer;
        }
        .xinjian h6{
            width:100%;
            height:50px;
            color:#fff;
            line-height:50px;
            text-align:center;
            font-size:20px;
            font-weight:normal;
        }
        #ding{
            width:60px;
            height:30px;
            font-size:14px;
            border-radius:3px;
            color:#fff;
            background-color:#0078ff;
            border:0;
            outline:none;
            cursor:pointer;
            box-shadow:0 0 10px rgba(0, 120, 255, 0.5);
        }
        .xinjian_width,.xinjian_height{
            float:left;
            width:85px;
            height:40px;
            margin-left:10px;
            border-radius:5px;
            margin-bottom:20px;
            background-color:#FFBC00;
        }
        .xinjian_width:hover,.xinjian_height:hover{
            background-color:#fff;
            color:#000;
        }
        .xinjian_width span,.xinjian_height span{
            float:left;
            width:30px;
            height:100%;
            font-size:16px;
            text-align:center;
            line-height:40px;
        }
        .xinjian_width input,.xinjian_height input{
            float:left;
            margin-top:5px;
            width:50px;
            height:30px;
            text-align:center;
            line-height:30px;
            font-size:14px;
            border:1px solid #FFBC00;
            box-sizing:border-box;
        }
        .box{
            float:left;
            width:90px;
            height:auto;
            background-color:#EC494E;
            overflow:hidden;
            border-radius:5px;
            transition:all 0.7s;
        }
        .box{
            margin-left:25px;
        }
        .linewidth{
            margin-left:20px;
        }
        .box:hover{
            background-color:#fff;
        }
        .box span{
            display:block;
            float:left;
            width:40px;
            height:45px;
            font-size:16px;
            color:#fff;
            text-align:center;
            line-height:40px;
            color:#fff;
            transition:all 0.3s;
        }
        .box input{
            float:left;
            width:45px;
            height:35px;
            margin-top:5px;
            border:1px solid #fff;
            box-sizing:border-box;
            text-align:center;
            line-height:40px;
            font-size:18px;
            color:#fff;
            background:#EC494E;
            border-radius:3px;
            box-shadow:0 0 0 4px #fff inset;
            transition:all 0.3s;
        }
        .box2 span{
            width:55px;
        }
        .box2 input{
            width:140px;
        }
        .space{
            float:left;
            width:100%;
            height:0;
            border-bottom:1px solid #fff;
            margin:20px 0;
        }
    </style>
</head>
<body>
    <h1>画板</h1>
    <div class="container">
        <div class="row">
            <ul name="" class="type">
                <li class="line typeactive" data="line">直&nbsp;&nbsp;&nbsp;线</li>
                <li class="rect" data="rect">矩&nbsp;&nbsp;&nbsp;形</li>
                <li class="circle" data="circle">圆&nbsp;&nbsp;&nbsp;圈</li>
                <li class="pen" data="pen">铅&nbsp;&nbsp;&nbsp;笔</li>
                <li class="poly" data="poly">多&nbsp;边&nbsp;形
                    <div class="bian"><span>边数</span><input type="number" name="number" min="3" value="3" max="15"></div></li>
                <li class="eraser" data="eraser">橡&nbsp;&nbsp;&nbsp;皮</li>
            </ul>
            <ul class="style">
                <li class="stroke styleactive">描&nbsp;&nbsp;&nbsp;边</li>
                <li class="fill">填&nbsp;&nbsp;&nbsp;充</li>
            </ul>
            <div class="space"></div>
            <div class="box"><span>颜色</span></label><input type="color" name="color" value="#000000"></div>
            <div class="box linewidth"><span>线宽</span><input type="number" name="number" value="1" max="150" min="1"></div>
            <div class="space"></div>
            <div class="create shezhi">新&nbsp;&nbsp;&nbsp;建
                <div class="xinjian">
                    <h6>画 板 尺 寸</h6>
                    <div class="xinjian_width">
                        <span>宽</span>
                        <input type="number" max="1070" min="500" value="500">
                    </div>
                    <div class="xinjian_height">
                        <span>高</span>
                        <input type="number" max="648" min="300" value="300">
                    </div>
                    <input type="button" name="queding" value="确定" id="ding">
                    <div class="xinjian_before">+</div>
                </div>
            </div>
            <div class="clear shezhi">清&nbsp;&nbsp;&nbsp;空</div>
            <div class="back shezhi">撤&nbsp;&nbsp;&nbsp;销</div>
            <div class="save shezhi">保&nbsp;&nbsp;&nbsp;存</div>
            <div class="cut shezhi" data="cut">剪&nbsp;&nbsp;&nbsp;切</div>
            <div class="copy shezhi">复&nbsp;&nbsp;&nbsp;制</div>
        </div>
    </div>
    <canvas width="1070" height="648"></canvas>
</body>
<script src="index.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
    var container=$(".container");
    var canvas=document.querySelector("canvas");
    var screenWidth=document.documentElement.clientWidth;
    var screenHeight=document.documentElement.clientHeight;
    var width=screenWidth-295;
    var height=screenHeight-15;
    canvas.width=width;
    canvas.height=height;
    var obj=canvas.getContext("2d");
    var typechoose=$(".type li");
    var stylechoose=$(".style li");
    var colorchoose=document.querySelector("input[type=color]");
    var widthchoose=document.querySelector(".linewidth input[type=number]");
    var canvasWidth=document.querySelector(".xinjian_width input[type=number]");
    var canvasHeight=document.querySelector(".xinjian_height input[type=number]");
    canvasWidth.value=width;canvasHeight.value=height;
    canvasWidth.max=screenWidth-295;canvasHeight.max=screenHeight-15;
    var ding=document.querySelector("#ding");
    var poly=$(".poly");
    var bian=$(".bian");
    var polychoose=$(".bian input");
    var shezhi=$(".shezhi");
    var cut=$(".cut");
    var copy=$(".copy");
    var back=$(".back");
    var clear=$(".clear");
    var save=$(".save");
    var create=$(".create");
    var xinjian=$(".xinjian");
    var create_close=$(".xinjian_before");
    var cutflag=false;
    var iscut=true;
    var color="#000";
    var type="line";
    var n=3;
    var linewidth="1";
    var style="stroke";
    var arr=[];
    $(".fill").css({display:"none"});
    // 多边形
    poly.hover(function(){
        bian.fadeIn();
    },function(){
        bian.fadeOut();
    })
    // 绘制形状
    typechoose.each(function(index,ele){
        $(ele).click(function(){
            typechoose.removeClass("typeactive");
            $(this).toggleClass("typeactive");
            cut.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
            copy.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
            type=$(this).attr("data");
            if($(this).is(".line")||$(this).is(".pen")){
                style="stroke";
                $(".stroke").addClass("styleactive");
                $(".fill").css({display:"none"}).removeClass("styleactive");
            }else{
                $(".fill").css({display:"block"});
            }
        })
    })
    // 描边、填充单击事件
    stylechoose.each(function(index,ele){
        $(ele).click(function(){
            style=$(this).attr("class");
            stylechoose.removeClass("styleactive");
            $(this).toggleClass("styleactive");
        })
    })
    // 剪切
    cut.click(function(){
        type=$(this).attr("data");
        typechoose.removeClass("typeactive");
        $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
        iscut=true;
    })
    copy.click(function(){
        type="cut";
        typechoose.removeClass("typeactive");
        $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
        iscut=false;
    })
    // 设置
    shezhi.each(function(index,ele){
        if($(ele).is(".cut")||$(ele).is(".copy")){
            return;
        }else{
            $(ele).click(function(){
                $(this).css({color:"#5bd219",backgroundColor:"#fff"}).animate({opacity:0.99},200,function(){
                    $(this).css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
                });
            })
        }
    })
    // 撤销
    back.click(function(){
        arr.pop();
        obj.clearRect(0,0,width,height);
        if(arr.length>0){
            obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
        }
    })
    // 清除
    clear.click(function(){
        arr=[];
        obj.clearRect(0,0,width,height);
    })
    // 保存
    save.click(function(){
        var reg=canvas.toDataURL("image/png");//跳转页面手动保存
//        var reg=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");//直接自动保存下载
        location.href=reg;
    })
    // 新建画布
    create.click(function(){
        xinjian.fadeIn();
    })
    create_close.click(function(e){
        e.stopPropagation()
        xinjian.fadeOut();
    })
    canvasWidth.onblur=function(){
        if(this.value<=this.min){
            this.value=this.min;
        }
        if(this.value>=screenWidth-295){
            this.value=screenWidth-295;
        }
        width=this.value;
    }
    canvasHeight.onblur=function(){
        if(this.value<=this.min){
            this.value=this.min;
        }
        if(this.value>=screenHeight-15){
            this.value=screenHeight-15;
        }
        height=this.value;
    }
    ding.onclick=function(e){
        canvas.width=width;
        canvas.height=height;
        canvas.style.left=(screenWidth+295-canvas.width)/2+"px";
        canvas.style.top=(screenHeight-5-canvas.height)/2+"px";
        arr=[];
        obj.clearRect(0,0,width,height);
        e.stopPropagation()
        xinjian.fadeOut();
    }
    // 颜色选择
    colorchoose.onchange=function(){
        color=this.value;
    }
    // 粗细改变
    widthchoose.onchange=function(){
        linewidth=this.value;
    }
    //多边形边数
    polychoose.change(function(){
        n=this.value;
    })
    var x,y,w,h;
    var lx,ly,lw,lh;
    var cutdata;
    canvas.onmousedown=function(e){
        x=e.offsetX;
        y=e.offsetY;
        if(type=="pen"){
            obj.beginPath();
            obj.moveTo(x,y);
        }
        if(type=="eraser"){
            obj.clearRect(x-5,y-5,10,10);
        }
        if(cutflag&&type=="cut"){
            if(arr.length!=0){
                arr.splice(-1,1);
            }
        }
        var draw=new Draw(obj,{type:style,color:color,width:linewidth});//实例化构造函数
        canvas.onmousemove=function(e){
            w=e.offsetX;
            h=e.offsetY;
            if(type!="eraser"){
                obj.clearRect(0,0,width,height);
                if(arr.length!=0){
                    obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
                }
            }
            if(cutflag&&type=="cut"){
                if(iscut){
                    obj.clearRect(lx,ly,lw-lx,lh-ly);
                }
                var nx=lx+(w-x);
                var ny=ly+(h-y);
                obj.putImageData(cutdata,nx,ny);
            }else if(type=="poly"){
                draw[type](x,y,w,h,n);
            }else{
                draw[type](x,y,w,h);
            }

        }
        document.onmouseup=function(){
            canvas.onmousemove=null;
            document.onmouseup=null;
            if(type=="cut"){
                if(!cutflag){
                    cutflag=true;
                    cutdata=obj.getImageData(x+1,y+1,w-x-2,h-y-2);
                    lx=x;ly=y;lw=w;lh=h;
                    container.css({display:"none"});
                }else{
                    cutflag=false;
                    container.css({display:"block"});
                }
            }
            arr.push(obj.getImageData(0,0,width,height));
        }
    }
</script>
</html>